<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 900px;
            height: 500px;
            margin: auto;
            outline: 2px solid red;
        }

        .box>div {
            display: flex;
            justify-content: space-between;
        }

        .box>div:nth-child(2) {
            width: 430px;
        }

        .box>div>div {
            width: 430px;
            height: 430px;
            border: 1px solid yellow;
            position: relative;
            overflow: hidden;
        }

        .box>div>div>img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .mask {
            width: 50px;
            height: 50px;
            background-color: rgba(12, 34, 55, .5);
            position: absolute;
            display: none;
        }

        .max-box {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <div class="middle-box">
                <img class="middle-img" src="./imgA_2.jpg" alt="">
                <div class="mask"></div>
            </div>
            <div class="max-box">
                <img class="max-img" src="./imgA_3.jpg" alt="">
            </div>
        </div>
        <div>
            <img class="min-img" id="A" src="./imgA_1.jpg" alt="">
            <img class="min-img" id="B" src="./imgB_1.jpg" alt="">
            <img class="min-img" id="C" src="./imgC_1.jpg" alt="">
        </div>
    </div>
    <script>
        let middleBox = document.getElementsByClassName("middle-box")[0];
        let middleImg = document.getElementsByClassName("middle-img")[0];
        let mask = document.getElementsByClassName("mask")[0];
        let maxBox = document.getElementsByClassName("max-box")[0];
        let maxImg = document.getElementsByClassName("max-img")[0];
        let minImg = document.getElementsByClassName("min-img");

        // 1.鼠标移入小号图片
        for (let i = 0; i < minImg.length; i++) {
            minImg[i].onmouseenter = function () {
                let num = this.getAttribute("id");
                middleImg.src = `./img${num}_2.jpg`;
                maxImg.src = `./img${num}_3.jpg`;
            }
        }

        // 2.鼠标移入中号盒子
        middleBox.onmouseenter = function () {
            mask.style.display = "block";
            maxBox.style.display = "block";
        }
        // 3.鼠标移出中号盒子
        middleBox.onmouseleave = function () {
            mask.style.display = "none";
            maxBox.style.display = "none";
        }
        // 4.鼠标在中号盒子中移动
        middleBox.onmousemove = function () {
            mask.style.left = event.clientX - mask.offsetWidth / 2 - middleBox.offsetLeft + "px";
            mask.style.top = event.clientY - mask.offsetHeight / 2 - middleBox.offsetTop + "px";
            // 水平方向的边界
            if (mask.offsetLeft <= 0) {
                mask.style.left = 0;
            } else if (mask.offsetLeft >= middleBox.offsetWidth - mask.offsetWidth) {
                mask.style.left = middleBox.offsetWidth - mask.offsetWidth + "px";
            }
            // 垂直方向的边界
            if (mask.offsetTop <= 0) {
                mask.style.top = 0;
            } else if (mask.offsetTop >= middleBox.offsetHeight - mask.offsetHeight) {
                mask.style.top = middleBox.offsetHeight - mask.offsetHeight + "px";
            }

            // 右边盒子图片移动
            maxImg.style.left = -(event.clientX - mask.offsetWidth / 2 - middleBox.offsetLeft) * (maxBox.offsetWidth / middleBox
                .offsetWidth) + "px";
            maxImg.style.top = -(event.clientY - mask.offsetHeight / 2 - middleBox.offsetTop) * (maxBox.offsetHeight / middleBox
                .offsetHeight) + "px";
        }
    </script>
</body>

</html>